<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				position:absolute;
				background-image: url(../day3/img/reg-mobile.jpg);
				
				background-repeat: no-repeat;
				background-size: 800px;
				
				left: 200px;
				
			}
			#s1{
				color: white;
			}
			.d1{
				position: static;
			}
			/* #b1{
				position:absolute;
				background-color:royalblue;
				
				right:  15px;
				  width:150px;
				  height: 55px;
			} */
			button{
				background-color: cornflowerblue;
				   width:150px;
				 height: 100px;
				 border: none;
			}
			button:hover{
				background-color: white;
			}
			form{
				background-color: white;
				width: 600px;
				height: 300px;
				padding-left: 100px;
			}
			input{
				text-indent:3em;
			}
			
			.img1{
				position:absolute;
				background-image: url(../day3/img/login-input2.png);
				background-repeat: no-repeat;
			}
			.img2{
				background-image: url(../day3/img/login-input3.png);
				background-repeat: no-repeat;
			}
			.img3{
				background-image: url(../day3/img/login-input3.png);
				background-repeat: no-repeat;
			}
			.code {
							font-family: Arial;
							font-style: italic;
							color: Red;
							border: 1;			
							font-weight: bolder;
							width: 90px;
							background-color: azure;
						}

		
			
		</style>
	</head>
	
	<body>
		<div class="d1">
			<button>手机注册</button>
			<button >邮箱注册</button>
			<form>
			<p id="p1"><input class="img1" type="text" name="email" placeholder="请输入您的常用邮箱" required /><span id="s1">请输入您的常用邮箱</span></p>
			<p><input class="img2" type ="text" name="name" placeholder="请输入昵称" required/><span id="s2">4-12位字符、英文、数字或者中文均可s</p>
			
			<p><input class="img3"type="password" name="pwd" placeholder="请输入密码" required/>6-16位字符或数字、字母，区分大小写</p>
			<p><input type="password" name="pwd" placeholder="请再次输入密码"/></p>
		<p><input id="validCode" class="img5" type="text" name="yan"
										placeholder="请输入右侧验证码">
										<input type="text" onClick="createCode()" readonly="readonly" id="checkCode" class="code"   />
										<input id="Button1"  onclick="validate();" type="button" value="确定" /> 
<script language="javascript" type="text/javascript">
			var code; //在全局 定义验证码 
			
			  window.onload=createCode();
			function createCode() {
				code = "";
				
				var codeLength = 4; //验证码的长度   
				var checkCode = document.getElementById("checkCode");
				var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K',
					'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符，当然也可以用中文的      
				for (var i = 0; i < codeLength; i++) {
					var charIndex = Math.floor(Math.random() * 36);
					code += selectChar[charIndex];
				}
				if (checkCode) {
					checkCode.className = "code";
					checkCode.value = code;
					checkCode.blur();
				}
			}

			function validate() {
				var inputCode = document.getElementById("validCode").value;
		 	if (inputCode.length <= 0) {
					alert("请输入验证码！");
				} else if (inputCode.toUpperCase() != code) {
					alert("验证码输入错误！");
					createCode(); //刷新验证码   
				} else {
					alert("^-^ OK");
				}
			}
			<
		</script></p>
		<button>确定</button>
		</form>
		</div>
			</body>
</html>